<template>
	<!-- 弹出的选择 -->
	<view v-show="showModel" class="durk" @click.stop="closeModel">
		<view class="select" @click.stop="noClose">
			<view class="selectDate">
				<picker mode="date" :start="startTime" :value="dateTime[0]+'-'+dateTime[1]+'-'+dateTime[2]" @change="bindDateChange">时间:
					<text> {{dateTime[0]+'年'+dateTime[1]+'月'+dateTime[2]+'日'}}</text></picker>
			</view>
			<view class="selectMorningOrAfter">
				<view :class="{'chooseIndex':morningOrAfter==index}" @click="selectTime(index)" v-for="(item,index) in array" :key='index'>
					<view>{{item}}</view>
				</view>
			</view>
			<view class="form">
				<view class="input" v-for="(item,index) in form" :key="index">
					<text>{{item.name}}:</text>
					<input class="noBorder inputBox" :adjust-position='pushTop' v-model="item.value" :type="item.type" :placeholder="'输入'+item.name"></input>
				</view>
			</view>
			<view class="activeName">{{activeName}}<text v-if="price!=''">￥{{price}}</text></view>
			<button class="btn-foot btn-primary" @click="sendOrder">{{getPrice?'提交预约':'loading...'}}</button>
		</view>
		<view class="durk durk1" v-show="showAppointment" @click.stop="noClose">
			<view class="appointmentTitle">
				<view class="title">预约详情</view>
				<view class="content">
					<text>您已成功预约\n {{dateTime}} {{morningOrAfter==0?'上午':'下午'}}\n {{activeName}}活动</text>
				</view>
				<view class="order" @click="seeOrder">查看订单</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<login-by-pc v-if="!loginState" @showOrHide="showOrHide"></login-by-pc>
		<!-- #endif -->
	</view>
</template>
<script>
	import { format } from '@/utils/getTime.js'
	import { getProductPrice,payment,requestPayment,notifying } from '@/service/common.js';
	import { isPoneAvailable } from '@/utils/reg.js';
	// #ifdef H5
		import loginByPc from '@/components/loginByPc/loginByPc.vue'
	// #endif
	export default {
		name: 'FooterIndex',
		props: ['showModel', 'activeName', 'proId'],
		// #ifdef H5
		components: {
			loginByPc
		},
		// #endif
		data() {
			return {
				getPrice: true, // 用来处理获取价格时的回调，避免还没获取中途用户提交预约照成价格差价
				startTime: '', //当天日期 格式 yyyy年MM月dd日
				dateTime: [], //当前选择日期 格式[年，月，日]
				array: ["上午", "下午"],
				morningOrAfter: -1, //早上 0 下午 1
				chooseIndex: -1, // 当前点击的列表数据下标
				form: [{
						name: '姓名',
						type: 'text',
						value: ''
					},
					{
						name: '电话',
						type: 'number',
						value: ''
					}
				],
				price: '', // 选中的套餐价格
				remark: '', // 备注信息
				showAppointment: false, // 预约详情模态框 false隐藏 true 显示
				maxNum: 3, // 最多提交3次，还是报错就不再提交
				sendState: 0, // 调用提交订单次数
				pushTop: false
				// #ifdef H5
				,loginState: true
				// #endif
			}
		},
		mounted() {
			let day = new Date();
			day.setTime(day.getTime() + 24 * 60 * 60 * 1000);
			this.startTime = format("yyyy-MM-dd", day);
			this.dateTime = format("yyyy-MM-dd", day).split('-')
		},
		methods: {
			noClose() { // 阻止弹窗关闭
				return false
			},
			closeModel() { // 关闭弹窗
				this.$emit('showOrHide');
			}, //  接收时间
			bindDateChange(e) { // 修改日期时间
				let o = this.dateTime
				let n = e.detail.value.split('-')
				if (o[0] != n[0] || o[1] != n[1] || o[2] != n[2]) { // 日期修改才触发
					this.dateTime = n
					this._getPrice()
					this.$emit('changeDate', {
						detail: {
							value: e.detail.value
						}
					})
				}
			},
			selectTime(index) { // 选择上下午
				if (this.morningOrAfter != index) {
					this.morningOrAfter = index
					this._getPrice()
					this.$emit('chooseMornOrAfter', {
						detail: {
							value: index
						}
					})
				}
			},
			// #ifdef H5
			showOrHide() {
				this.loginState = !this.loginState
			},
			// #endif
			check() { // 检查填写项
				let title = '';
				let checkObj = this.form;
				if (this.morningOrAfter < 0) {
					title = '请选择上/下午'
				} else if (!checkObj[0].value) {
					title = '姓名不能为空'
				} else if (!checkObj[1].value) {
					title = '手机号码不能为空'
				} else if (!isPoneAvailable(checkObj[1].value)) {
					title = '请输入正确的手机号码'
				}
				if (title) {
					uni.showToast({
						title,
						icon: 'none',
						duration: 1000
					})
					return false
				} else {
					return true
				}
			},
			sendOrder() { // 提交订单
				if (this.check()) {
					if (this.getToken(true)) { // 有token再获取数据
						if (this.getPrice && this.maxNum > this.sendState) { // 数据验证通过和非获取价格阶段时提交预约
							let obj = {
								cate_id: this.proId,
								time_type: this.morningOrAfter == 0 ? 'am' : 'pm',
								time: this.getTime(),
								price: this.price,
								username: this.form[0].value,
								phone: this.form[1].value,
								remark: this.remark
							}
							// #ifdef H5
							obj.trade_type = 'wap'
							// #endif
							// #ifdef MP
							obj.trade_type = 'miniapp'
							// #endif
							console.log(obj)
							payment(obj).then(res => {
								console.log(res)
								if (res.code == 200) {
									let num = res.data.wechat.out_trade_no
									console.log(res.data.wechat)
									requestPayment(res.data.wechat, res => {
										notifying(num).then(res => {
											console.log(res)
											if (res.code == 200) {
												this.hideModal = true;
												this.form[0].value = '';
												this.form[1].value = '';
												this.showAppointment = true;
											}
										})
									}, err => {
										wx.showToast({
											title: '预约失败',
											icon: 'none'
										})
										this.seeOrder()
									})
								} else {
									wx.showToast({
										title: '提交失败，正在为您重试',
										icon: 'none'
									})
									this.sendState = Number(this.sendState) + 1 // 失败时累计次数
									this.sendOrder()
								}
							})
						}
					} else {
					// #ifdef H5
						uni.showModal({
							title: '提示',
							content: '您当前尚未登录，是否登录',
							success:res=> {
								res.confirm?this.showOrHide():''
							}
						})
					// #endif
					// #ifdef MP
						this.token(res => {
							res?this.sendOrder():''  // 成功时重新请求
						})
					// #endif
					}

				}
			},
			getTime() { // 获取时间
				return this.dateTime[0] + '-' + this.dateTime[1] + '-' + this.dateTime[2];
			},
			_getPrice() { // 获取价格
				if (this.morningOrAfter >= 0) {
					this.getPrice = false
					getProductPrice(this.proId, {
						time: this.getTime(),
						time_type: this.morningOrAfter == 0 ? 'am' : 'pm'
					}).then(res => {
						if (res.code == 200) {
							this.price = res.data.price;
							this.getPrice = true; //getPrice用来处理获取价格时的回调，避免还没获取中途用户提交预约照成价格差价
						} else if (res.code == 404) {
							uni.showToast({
								title: '价格暂未定，请联系商家',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '请刷新重试',
								icon: 'none'
							})
						}
					})
				}

			},
			seeOrder() {
				uni.navigateTo({
					url: '../../pages/order/order'
				})
			}
		}
	}
</script>
<style scoped>
	.select {
		width: 630rpx;
		height: 1060rpx;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		border-top-left-radius: 120rpx;
		border-top-right-radius: 120rpx;
		right: 0;
		padding-top: 108rpx;
		padding-left: 120rpx;
		font-size: 36rpx;
	}

	.select>view {
		width: 520rpx;
	}

	.selectDate {
		text-align: center;
		border-bottom: 2rpx solid #dfdfdfff;
	}

	.selectMorningOrAfter {
		height: 200rpx;
		display: flex;
		justify-content: space-between;
		color: rgba(200, 155, 78, 1);
	}

	.selectMorningOrAfter>view {
		width: 50%;
		text-align: center;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.selectMorningOrAfter>view.chooseIndex>view {
		font-size: 34rpx;
		line-height: 79rpx;
		background: rgba(200, 155, 78, 1);
		color: #fff;
		border-radius: 40rpx;
		width: 128rpx;
		text-align: center;
	}

	.form .input {
		display: flex;
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 2rpx solid #dfdfdfff;
		margin-bottom: 40rpx;
	}

	.form .input input {
		text-align: center;
		font-size: 24rpx;
		height: 60rpx;
		flex: 1;
		border: 0rpx;
		padding-left: 10rpx;
	}

	.activeName {
		width: 518rpx;
		height: 88rpx;
		line-height: 88rpx;
		color: #c89b4eff;
		border-radius: 40rpx;
		background-color: #fff;
		border: 1px solid #dfdfdfff;
		margin-top: 60rpx;
		text-align: center;
	}

	.activeName text {
		color: red;
		font-weight: 400;
		font-size: 27rpx;
	}

	.durk1 {
		z-index: 2;
	}

	.appointmentTitle {
		width: 630rpx;
		height: 420rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 40rpx;
		text-align: center;
		font-size: 32rpx;
		padding: 40rpx 20rpx 0;
	}

	.title {
		font-size: 50rpx;
		width: 100%;
		border-bottom: 4rpx solid rgba(223, 223, 223, 1);
	}

	.content {
		text-align: center;
		font-size: 32rpx;
		margin: 40rpx auto;
		width: 590rpx;
		height: 178rpx;
		line-height: 48rpx;
	}

	.order {
		width: 172rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		margin: auto;
		font-size: 30rpx;
		background-color: rgba(200, 155, 78, 1);
		color: white;
		border-radius: 40rpx;
	}
</style>
